<template>
  <div>
    <el-dialog title="选择用户" :visible.sync="dialogVisible" :before-close="handleClose">
      <template>
        <el-transfer
          v-model="selectedUserData"
          filterable
          :render-content="renderFunc"
          :titles="['未分配', '已有']"
          :button-texts="['移除', '添加']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="allUserOptions">
        </el-transfer>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleFirm">确定</el-button>
     </div>
    </el-dialog>
  </div>  
</template>

<script>

export default {
  name: 'selectUsersDialog',
  props: {
    data: {
      type: Array,
      default: [] // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    }
  },
  components: { },
  data() {
    return {
      selectedUserData: [],
      allUserOptions: this.$store.getters.usersList.map(item => ({ key: item.id, label: item.username + '[' + item.department_name + ']' })),
      dialogVisible: false
    }
  },
  filters: {
  },
  created() {
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.selectedUserData = []
        if (newValue && newValue.length > 0) {
          newValue.map(item => {
            this.selectedUserData.push(item)
          })
        }
      },
      deep: true
    },
    visible: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      this.dialogVisible = val
    }
  },
  computed: {
  },
  methods: {
    renderFunc(h, option) {
      return <span>{ option.label }</span>
    },
    handleChange(value, direction, movedKeys) {
      if (direction === 'left') {
        console.log(movedKeys)
        movedKeys.map(item => {
        })
        // 移除
      } else if (direction === 'right') {
        // 分配
        console.log(movedKeys)
        movedKeys.map(item => {
        })
      } else {
        console.log(direction)
      }
    },
    handleClose(done) {
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    handleFirm() {
      this.$emit('closeDialog', { type: 'success', data: this.selectedUserData })
    }
  }
}
</script>
<style scoped>
  .form-row {
    display: block;
  }
  .form-item {
    width: 40%
  }

  .form-item-full {
    width: 100%
  }
  .form-content{
    overflow:hidden;
    border: 1px solid #ddd;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-sizing: content-box;
    width: 80%;
    margin-left:5%;
  }
  .form-header {
    height: 40px;
    line-height: 15px;
    color: #676a6c;
    background-color: #F9F9F9;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #ddd;
  }
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .form-header-button {
    float: right;
    margin: 0.3em 1em 0;
  } 
  .form-header-title{
    float: left;
    margin: 1.1em 1em 0.2em;
  }
  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }

</style>

